<template>
  <div>
    <Card shadow style="width:360px">
      <p slot="title">
        <Icon type="ios-contact-outline"/>个人信息
      </p>
      <div>
        <Row style="line-height:36px;">
          <Col span="6">用户名：</Col>
          <Col span="18">{{userName}}</Col>
        </Row>
        <Row style="line-height:36px;">
          <Col span="6">邮箱：</Col>
          <Col span="18">{{email}}</Col>
        </Row>
        <Row style="line-height:36px;">
          <Col span="6">电话：</Col>
          <Col span="18">{{mobile}}</Col>
        </Row>
        <Row style="line-height:36px;">
          <Col span="6">所属部门：</Col>
          <Col span="18">{{deptName}}</Col>
        </Row>
        <Button type="warning" @click="showEditPassword">修改密码</Button>
      </div>
    </Card>
    <Modal v-model="editPasswordModal" :closable="false" :mask-closable="false" :width="500">
      <h3 slot="header" style="color:#2D8CF0">修改密码</h3>
      <Form
        ref="editPasswordForm"
        :model="editPasswordForm"
        :label-width="100"
        label-position="right"
        :rules="passwordValidate"
      >
        <FormItem label="原密码" prop="password" :error="oldPassError">
          <Input v-model="editPasswordForm.password" type="password" placeholder="请输入现在使用的密码"></Input>
        </FormItem>
        <FormItem label="新密码" prop="newPassword">
          <Input v-model="editPasswordForm.newPassword" type="password" placeholder="请输入新密码，至少6位字符"></Input>
        </FormItem>
        <FormItem label="确认新密码" prop="rePassword">
          <Input v-model="editPasswordForm.rePassword" type="password" placeholder="请再次输入新密码"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default" @click="cancel">关闭</Button>
        <Button type="primary" :loading="btnLoading" @click="comfirmEditPass">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { updatePassword } from "@/api/user";
export default {
  name: "personal",
  data() {
    const valideRePassword = (rule, value, callback) => {
      if (value !== this.editPasswordForm.newPassword) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    return {
      editPasswordModal: false, // 修改密码模态框显示
      savePassLoading: false,
      oldPassError: "",
      btnLoading: false,
      editPasswordForm: {
        password: "",
        newPassword: "",
        rePassword: ""
      },
      passwordValidate: {
        password: [{ required: true, message: "请输入原密码", trigger: "blur" }],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { min: 6, message: "请至少输入6个字符", trigger: "blur" },
          { max: 32, message: "最多输入32个字符", trigger: "blur" }
        ],
        rePassword: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
          { validator: valideRePassword, trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    ...mapState({
      userName: state => state.user.userName,
      email: state => state.user.email,
      mobile: state => state.user.mobile,
      deptName: state => state.user.deptName
    })
  },
  methods: {
    showEditPassword() {
      this.editPasswordModal = true;
    },
    cancel() {
      this.editPasswordModal = false;
    },
    comfirmEditPass() {
      this.$refs["editPasswordForm"].validate(async valid => {
        if (valid) {
          this.btnLoading = true;
          try {
            let params = JSON.parse(JSON.stringify(this.editPasswordForm));
            const res = await updatePassword(params);
            if (res.code==0) {
              this.$Message.success("修改成功!");
              this.editPasswordModal = false;
            } else {
              this.$Message.error(res.msg);
            }
          } catch (err) {
            console.log(err);
            this.$Message.error("服务器异常，稍后再试");
          }
          this.btnLoading = false;
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    }
  },
  mounted() {}
};
</script>

<style lang="less">
</style>
